<template>
  <view class="viewport">
    <!-- 自定义NavBar -->
    <CustomNavbar></CustomNavbar>
    <!-- 滚动容器 -->
    <scroll-view
      class="scroll-view"
      scroll-y
      refresher-enabled
      :refresher-triggered="isTriggered"
      @scrolltolower="onScrolltolower"
      @refresherrefresh="onRefresherrefresh"
    >
      <Skeleton v-if="isLoading" />
      <template v-else>
        <XtxSwiper :list="bannerList" />
        <CategoryPanel :list="categoryList" />
        <HotPanel :list="hotList" />
        <XtxGuess ref="guessRef"
      /></template>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import Skeleton from './components/Skeleton.vue'
import useIndexHooks from './useIndexHooks'

const {
  bannerList,
  categoryList,
  hotList,
  guessRef,
  isLoading,
  isTriggered,
  onScrolltolower,
  onRefresherrefresh,
} = useIndexHooks()
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
}
</style>
